const { merge } = require('webpack-merge');
const { baseConfig, P } = require('./webpack.base.config');
const Dotenv = require('dotenv-webpack');

const port = 8083;

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'source-map',
  cache: {
    type: 'filesystem', // 使用文件缓存,提升构建速度,第一次构建会加大构建速度
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                auto: (resourcePath) => resourcePath.endsWith('.modules.less'), // 匹配.modules.less文件来进行css模块化。
                localIdentName: '[local]_[hash:base64:10]',
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  '@primary-color': '#405ce2',
                  '@font-size-base': '12px',
                  '@border-radius-base': '5px',
                  '@box-shadow-base': '0 2px 8px rgb(0 0 0 / 15%)',
                  '@text-color': '#666',
                  'arco-theme-tag': '.arco-theme',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },

  devServer: {
    static: {
      directory: P('../dist'),
      serveIndex: true,
    },
    compress: true,
    host: '127.0.0.1',
    hot: true,
    port,
    open: true,
    historyApiFallback: true,
  },
  plugins: [
    new Dotenv({
      path: P('../.env.development'),
    }),
  ],
});
